{% extends "system_setup/base.html" %}
{% load state_display %}

{% block page_link %}
<script src="../../static/system_setup/js/base.js"></script>
<link rel="stylesheet" href="../../static/system_setup/css/style.css">
<script src="../../static/system_setup/js/base.js"></script>

{% endblock %}


{% block style %}
<style>
    .add_class {
        background: #1E90FF;
    }

    .li-class {
        list-style: none;
        margin-top: 2%;
        color: #0b0b0b;
        cursor: pointer;
    }

    .add_background {
        background: #A9A9A9;
    }

    tr {
        height: 35px;
    }

    th {
        text-align: center;
    }

    #clsy_table tr:hover {
        background: #cfcfcf;
    }

    {#tbody td {#}
    {#    overflow: hidden;#}
    {#    white-space: nowrap;#}
    {#    text-overflow: ellipsis;#}
    {# }#}

    td:first-child, th:first-child {
        position: sticky;
        left: 0; /* 首行永远固定在左侧 */
        z-index: 1;
    }

    thead tr th {
        position: sticky;
        top: 0; /* 列首永远固定在头部  */
        background-color: #E8E8E8;
    }

    th:first-child {
        z-index: 2;
    }


    .tab_top {
        width: 100px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        cursor: pointer;
    }
    .tab_top_right {
        float: right;
        width: 300px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
    }
    .search{
        width: 28%;
        display: flex;
        float: right;
        margin: 5.5px 0;
        margin-right: 0.5%;
        /*border: 1px solid red;*/
    }

    .search1{
        width: 95%;
        display: flex;
        float: right;
        margin: 5.5px 0;
        margin-right: 1%;
        /*border: 1px solid red;*/
    }

    .search1 input{
        vertical-align:middle;
        float: left;//左浮动
    flex: 4;
        height: 29px;
        width: 77%;
        outline: none;
        border: 1px solid #0070c1;
        box-sizing: border-box;//盒子模型，怪异IE盒子模型，width=content+border*2+padding*2
    padding-left: 10px;
        border-bottom-left-radius: 5px;
        border-top-left-radius: 5px;
    }

    .search1 button{
        float: right;
        flex: 1;
        height: 29px;
        width: 23%;
        line-height: 29px;
        background-color: #0070c1;
        color: white;
        border-style: none;
        outline: none;
        border-bottom-right-radius: 5px;
        border-top-right-radius: 5px;
    }

    .search1 button i{
        font-style: normal;
    }

    .search1 button:hover{
        font-size: 16px;
    }
</style>
{% endblock %}


{% block right_content %}
<div class="headline">
    <div id="document_addressee_details_tab" class="tab_top">
        职能分组
    </div>
    <div style="line-height: 30px; text-align: right;display: inline-block; position: relative;left: 85%">
        <a style="width: 100px; height: 30px; background: #1E90FF; border-radius: 4px;color: #FFFFFF;border: none; text-align: center"
           type="button" onclick='do_create()'>
            创建</a>
        </div>

{#    <div class="tab_top_right">#}
{#        <form role="search" method="get" id="searchform" action="./company_admin" style="font-size: 0;margin-top: 5px;">#}
{#            <input type="search" name="search_value" placeholder="搜索" value="{{ search_value }}" style="font-size: 14px;height: 30px;border: #00a0e9 solid 1px;border-top-left-radius: 4px;border-bottom-left-radius: 4px;vertical-align: top;width: 200px;">#}
{#            <button type="submit" style="font-size: 14px;height: 30px;border: #00a0e9 solid 1px;border-top-right-radius: 4px;border-bottom-right-radius: 4px;border-left: none;background: #00a0e9;color: white;line-height: 30px;vertical-align: top;"><span class="ion-ios-search-strong"> 搜索</span></button>#}
{#        </form>#}
{#    </div>#}
</div>

<div id="new_models" style="width: 80%;height: 80%;position: absolute;display: none;">
    <div id="box"
         style="width: 700px;height: 500px;background: white;z-index: 10100;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #cfcfcf solid 1px;">
        <div style="width: 100%;height: 50px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;">
            <h5 id="modal-title" class="modal-title"
                style="line-height: 50px;width: 20%;margin-left: 1%;display: inline-block;">新建职能分组</h5>
            <span onclick="close_models()" style="float: right;line-height: 50px;padding-right: 2%;cursor: pointer;"><i
                    class="iconfont icon-quchu"></i></span>
        </div>
        <hr>
        <div style="height: 400px;width: 100%;padding-top: 2%;padding-left: 2%;">
            <div style="margin-top: 2%;">
                <label><span style="color: red;"></span>名称：</label>
                <input id="ks_name" type="text" placeholder=""
                       style="width: 80%;border-radius: 3px;border: #dfdfdf solid 1px;height: 35px;">
            </div>
            <div style="margin-top: 2%;">
                <label><span style="color: red;visibility: hidden;"></span>&nbsp人员：</label>
                <textarea onclick="fill_val(this, ele_id=this.id)" id="people" type="" placeholder=""
                          data-toggle="modal" style="width: 80%" data-target=".bd-example-modal-xl"></textarea>
            </div>
        </div>
        <hr>
        <div style="width: 100%;height: 50px;text-align: right;padding-right: 2%;">
            <button id="add_big_limits_model"
                    style="width: 100px;height: 36px;border: #dfdfdf solid 1px;margin-top: 7px;border-radius: 3px;"
                    onclick="confirm()">确认
            </button>
        </div>
    </div>
</div>

<div class="right-box" style="width: 100%;height: 95%;margin-top: 0;">
    <div style="height: 93%;width: 100%;border-bottom: #cccccc solid 1px;background-color: white;">
        <table id="clsy_table" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0" cellpadding="2" width="100%" border="1">
            <thead>
            <tr>
                <th style="width: 5%;">序号</th>
                <th style="width: 15%;">名称</th>
                <th style="width: 73%;">人员</th>
                <th style="width: 7%;">操作</th>
            </tr>
            </thead>
            <tbody  id="t_table1">
            {% for obj in objs %}
            <tr style="height: 37px;">
                <td style="text-align: center;">{{ forloop.counter }}</td>
                <td style="text-align: center;">{{ obj.describe }}</td>
                <td style="text-align: left;padding-left: 5px">{{ obj.function_ids_users.all | deal_audit}}</td>
                <td style="text-align: center;"><a href='#' onclick="do_delete({{ obj.id }})">删除</a></td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>

    <nav style="background: none;padding-top: 0.5%;" aria-label="Page navigation example">
        <div style="display: inline-block;margin-left: 2%;">
            <ul class="pagination">
                <li class="page-item "><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;border-top-left-radius: 4px;border-bottom-left-radius: 4px;" href="./function_list_view?page=1&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >首页</a></li>
                {% if objs.has_previous %}
                <li class="page-item"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="./function_list_view?page={{ objs.previous_page_number }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >上一页</a></li>
                {% else %}
                <li class="page-item disabled"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >上一页</a></li>
                {% endif %}

                {% for item in page_range %}
                {% if item == currentPage %}
                <li class="page-item active"><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;" href="./function_list_view?page={{ item }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
                {% else %}
                <li class="page-item"><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;" href="./function_list_view?page={{ item }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >{{ item }}</a></li>
                {% endif %}
                {% endfor %}

                {% if objs.has_next %}
                <li class="page-item"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="./function_list_view?page={{ objs.next_page_number }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >下一页</a></li>
                {% else %}
                <li class="page-item disabled"><a class="page-link" style="width: 60px;height: 30px;line-height: 30px;text-align: center;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >下一页</a></li>
                {% endif %}
                <li class="page-item" style="border-left: none;"><a class="page-link" style="width: 40px;height: 30px;line-height: 30px;text-align: center;border-top-right-radius: 4px;border-bottom-right-radius: 4px;" href="./function_list_view?page={{ paginator.num_pages }}&search_value={{ search_value }}" rel="external nofollow"  rel="external nofollow" >尾页</a></li>
            </ul>
        </div>
        <div style="display: inline-block;margin-left: 1%;">共 {{ paginator.count }} 条数据</div>
    </nav>

</div>

<div style="z-index: 11000" class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" style="margin-top: 3%;">
        <div class="modal-content"
             style="height: 600px;border-radius: 7px;width: 900px;margin-left: 15%;background: #F8F8FF;">
            <div class="modal-header" style="height: 50px;">
                <h5 id="model_title" class="modal-title" style="line-height: 50px;width: 10%;margin-left: 2%;"></h5>
                <button id="close-model" type="button" class="close" data-dismiss="modal" aria-label="Close"
                        style="margin-right: 3%;line-height: 50px;">
                    <span aria-hidden="true" style="font-size: 28px;"><i class="iconfont icon-quchu"></i></span>
                </button>
            </div>
            <div class="modal-body" style="height: 200px;padding: 1%;">
                <div style="display: inline-block;width: 30%;height: 100%;border-right: #E8E8E8 solid 1px;">
                    <div style="width: 100%;height: 35px;color: #0b0b0b;text-align: center;">
                        <div class="search1" style="vertical-align: center;">
                            <input type="text" placeholder="请输入..." name="" id="search_data" value="">
                            <button id="search_button">搜索</button>
                        </div>
                    </div>
                    <div style="width: 100%;height: 35px;line-height: 35px;padding-left: 2%;color: #0b0b0b;border-bottom: #cfcfcf solid 1px;">
                        <div id="an_branch"
                             style="width: 32%;display: inline-block;cursor: pointer;text-align: center;color: #01aaed;">
                            按部门
                        </div>
                        <div id="an_rank"
                             style="width: 32%;display: inline-block;cursor: pointer;text-align: center;">按权限
                        </div>
                        <div id="an_func"
                             style="width: 32%;display: inline-block;cursor: pointer;text-align: center;">按职能
                        </div>
                    </div>
                    <div id="department_list" style="width: 100%;height: 85%;overflow: auto;">
                        <div style="width: 100%;height: 100%;text-align: center;">
                            <img style="width: 30%;height: 30%;margin-top: 35%;" src="../../static/public_file/images/jiazai.gif" alt="">
                        </div>
                    </div>
                </div>

                <div style="display: inline-block;width: 69%;height: 100%;overflow: auto;vertical-align: top;left: 0;">
                    <table class="table table-hover table-bordered"
                           style="border-collapse: collapse;margin: 0;padding: 0;">
                        <thead>
                        <tr>
                            <th scope="col" style="width: 10%;">
                                <input id="all_select_checkbox" type="checkbox">
                            </th>
                            <th scope="col" style="width: 20%;">序号</th>
                            <th scope="col" style="width: 35%;">姓名</th>
                            <th scope="col" style="width: 35%;">工号</th>
                        </tr>
                        </thead>
                        <tbody style="overflow: auto;" id="t_table2"></tbody>
                    </table>
                    <div id="img-display1" style="width: 75%;text-align: center;">
                        <div style="margin-top: 10%;">
                            <img src="../../static/public_file/images/page-img/11.jpg" alt="">
                            <p style="margin: 0;padding: 0;vertical-align: top;">暂无数据</p>
                        </div>
                    </div>
                </div>

                <div style="height: 30%;width: 100%;border-top: #E8E8E8 solid 1px;overflow: auto;display: none;">
                    <div id="checked-label" style="margin-top: 1%;margin-left: 3%;width: 90%;">

                    </div>
                </div>

            </div>
            <div class="modal-footer" style="height: 50px;">
                <button id="model-affirm" type="button" class="btn btn-primary"
                        style="margin-left: 2%;margin-right: 2%;border-radius: 3px;height: 35px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;提&nbsp;交&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block script %}
<script>
    window.onload = function () {
        document.getElementById("loading").style.display = "none";
        document.getElementById("SuperSU_ul").style.display = "inline-block";
        document.getElementById("jiantou2").className = "iconfont icon-jiantou-xia";
        document.getElementById("function_id").className = "add_class";
        document.getElementById("system-management").className = "add-nav-active";
    };
    function do_create(){
        document.getElementById("new_models").style.display="table";
    }
    function do_delete(id) {
        var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/system-setup/function_delete_view", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send("id=" + String(id));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        alert(JsonDate['message'])
                        location.reload()

                    }
                }
            }

    }
    function fill_val(obj, ele_id, types=false, job_numbers=false) {
        document.getElementById("new_models").style.display="table";
        var id = ele_id;
        sessionStorage.clear();
        document.getElementById("an_branch").style.color = "#01aaed";
        document.getElementById("an_rank").style.color = "#0b0b0b";
        document.getElementById("an_func").style.color = "#0b0b0b";
        document.getElementById("all_select_checkbox").checked = false;
        var check_box_list = document.getElementsByClassName("check_box");
        document.getElementById("search_button").setAttribute("onclick", "search_data()");
        document.getElementById("an_branch").setAttribute("onclick", "change_left_val(this.id)");   // 按部门
        document.getElementById("an_rank").setAttribute("onclick", "change_left_val(this.id)");     // 按权限
        document.getElementById("an_func").setAttribute("onclick", "change_left_val(this.id)");     // 按职能
        for (var t = 0; t < check_box_list.length; t++) {
            document.getElementById(check_box_list[t].id).checked = false;
        }
        document.getElementById("checked-label").innerHTML = "";

        document.getElementById("model_title").innerText = "选择执行人";

        document.getElementById("model-affirm").setAttribute("onclick", "summit_val('"+ele_id+"')")

        // deltr1();
        document.getElementById("img-display1").style.display = "inline-block";
        if (window.branch_list) {
            var branch_list = window.branch_list;
            var department_list = document.getElementById("department_list");
            department_list.innerHTML = "";
            var ul_tag = document.createElement("ul");
            ul_tag.style.fontSize = "0";
            ul_tag.style.margin = "0";
            ul_tag.style.padding = "0";
            for (var i = 0; i < branch_list.length; i++) {
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.innerHTML = "<p style='margin-left: 20%;'>" + branch_list[i] + "</p>";
                li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "')");
                li_tag.setAttribute("id", branch_list[i]);
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
            }
        } else {
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/technological/delegation", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        window.personnel_list = JsonDate["data"];
                        window.emp_info_dict = JsonDate["emp_info_dict"];
                        window.people_dict = JsonDate["people_dict"];
                        window.people_dict_new = JsonDate["people_dict_new"];
                        window.branch_list = JsonDate["branch_list"];
                        window.function_list = JsonDate["function_list"];
                        var department_list = document.getElementById("department_list");
                        department_list.innerHTML = "";
                        var ul_tag = document.createElement("ul");
                        ul_tag.style.fontSize = "0";
                        ul_tag.style.margin = "0";
                        ul_tag.style.padding = "0";
                        for (var i = 0; i < JsonDate["branch_list"].length; i++) {
                            var li_tag = document.createElement("li");
                            li_tag.style.fontSize = "14px";
                            li_tag.style.margin = "0";
                            li_tag.style.padding = "0";
                            li_tag.innerHTML = "<p style='margin-left: 20%;'>" + JsonDate["branch_list"][i] + "</p>";
                            li_tag.setAttribute("onclick", "choice_peopel('" + JsonDate["branch_list"][i] + "')");
                            li_tag.setAttribute("id", JsonDate["branch_list"][i]);
                            li_tag.className = "li-class";
                            ul_tag.appendChild(li_tag);
                            department_list.appendChild(ul_tag);
                        }
                    }
                }
            }
        }
    }

    function close_models() {
            document.getElementById("new_models").style.display="none";
    }

    function search_data() {
        var searchData = document.getElementById("search_data").value;
        let emp_info_dict = window.emp_info_dict;
        var searchValNum = 1;
        var t_table = document.getElementById("t_table2");
        t_table.innerHTML = '';
        for (var i in emp_info_dict){
            for (var j = 0; j<emp_info_dict[i].length;j++){
                if (emp_info_dict[i][j]['real_name'].indexOf(searchData) !== -1){
                    var elm = emp_info_dict[i];
                    var tr = document.createElement("tr");
                    var td = document.createElement("td");
                    var td1 = document.createElement("td");
                    var td2 = document.createElement("td");
                    var td3 = document.createElement("td");
                    td.innerHTML = "<input id='" + elm[j].real_name + "(" + elm[j].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + i + "\")'>";
                    td.style.textAlign = "center";
                    td1.innerHTML = searchValNum;
                    td1.style.textAlign = "center";
                    td2.innerHTML = elm[j].real_name;
                    td2.title = elm[j].real_name;
                    td2.style.textAlign = "center";
                    td3.innerHTML = elm[j].job_number;
                    td3.title = elm[j].job_number;
                    td3.style.textAlign = "center";
                    tr.appendChild(td);
                    tr.appendChild(td1);
                    tr.appendChild(td2);
                    tr.appendChild(td3);
                    t_table.appendChild(tr);
                    searchValNum += 1;
                    document.getElementById("img-display1").style.display = "none";
                }
            }
        }
    }

    function change_left_val(ele_id) {
        if (ele_id === "an_rank") {
            document.getElementById("an_branch").style.color = "#0b0b0b";
            document.getElementById("an_func").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var new_branch_list = ["书记、院长:A", "院领导:B", "职能科室负责人:C", "临床医技科室负责人:D", "副主任:G", "护士长:E","普通员工:F"];
            var new_department_list = document.getElementById("department_list");
            var new_ul_tag = document.createElement("ul");
            new_ul_tag.style.fontSize = "0";
            new_ul_tag.style.margin = "0";
            new_ul_tag.style.padding = "0";
            for (var EF = 0; EF < new_branch_list.length; EF++) {
                var new_li_tag = document.createElement("li");
                new_li_tag.style.fontSize = "14px";
                new_li_tag.style.margin = "0";
                new_li_tag.style.padding = "0";
                new_li_tag.style.paddingLeft = "5%";
                new_li_tag.innerHTML = "<p>" + new_branch_list[EF].split(":")[0] + "</p>";
                new_li_tag.setAttribute("onclick", "choice_peopel_1('" + new_branch_list[EF].split(":")[1] + "')");
                new_li_tag.setAttribute("id", new_branch_list[EF].split(":")[1]);
                // new_li_tag.setAttribute('style', "cursor: por")
                new_li_tag.className = "li-class";
                new_ul_tag.appendChild(new_li_tag);
                new_department_list.appendChild(new_ul_tag);
            }
        } else if (ele_id === 'an_func') {
            document.getElementById("an_branch").style.color = "#0b0b0b";
            document.getElementById("an_rank").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var department_list_1 = document.getElementById("department_list");
            var ul_tag_1 = document.createElement("ul");
            ul_tag_1.style.fontSize = "0";
            ul_tag_1.style.margin = "0";
            ul_tag_1.style.padding = "0";
            var function_list = window.function_list;
            var func_list = [];
            for (var tt in function_list['function_dict']) {
                func_list.push(tt);
            }
            console.log(func_list)
            for (var AB = 0; AB < func_list.length; AB++) {
                var new_li_1 = document.createElement("li");
                new_li_1.style.fontSize = "14px";
                new_li_1.style.margin = "0";
                new_li_1.style.padding = "0";
                new_li_1.style.paddingLeft = "5%";
                new_li_1.innerHTML = "<p>" + func_list[AB] + "</p>";
                new_li_1.setAttribute("onclick", "choice_peopel_2('" + function_list['function_dict'][func_list[AB]] + "')");
                new_li_1.setAttribute("id", function_list['function_dict'][func_list[AB]]);
                new_li_1.className = "li-class";
                ul_tag_1.appendChild(new_li_1);
                department_list_1.appendChild(ul_tag_1);
            }
        } else {
            document.getElementById("an_rank").style.color = "#0b0b0b";
            document.getElementById("an_func").style.color = "#0b0b0b";
            document.getElementById(ele_id).style.color = "#01aaed";
            deltr1();
            document.getElementById("img-display1").style.display = "inline-block";
            document.getElementById("department_list").innerHTML = "";
            var branch_list = window.branch_list;
            var department_list = document.getElementById("department_list");
            department_list.innerHTML = "";
            var ul_tag = document.createElement("ul");
            ul_tag.style.fontSize = "0";
            ul_tag.style.margin = "0";
            ul_tag.style.padding = "0";
            for (var i = 0; i < branch_list.length; i++) {
                var li_tag = document.createElement("li");
                li_tag.style.fontSize = "14px";
                li_tag.style.margin = "0";
                li_tag.style.padding = "0";
                li_tag.innerHTML = "<p style='margin-left: 20%;'>" + branch_list[i] + "</p>";
                li_tag.setAttribute("onclick", "choice_peopel('" + branch_list[i] + "')");
                li_tag.setAttribute("id", branch_list[i]);
                li_tag.className = "li-class";
                ul_tag.appendChild(li_tag);
                department_list.appendChild(ul_tag);
            }
        }
    }

    // 删除列表
    function deltr1() {
        var tb = document.getElementById('t_table2');
        var rowNum = tb.rows.length;
        for (i = 0; i < rowNum; i++) {
            tb.deleteRow(i);
            rowNum = rowNum - 1;
            i = i - 1;
        }
    }

    function choice_peopel(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        var emp_info_dict = window.emp_info_dict;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', '" + chose_id + "')");

        for (var i = 0; i < emp_info_dict[choice_key].length; i++) {
            var elm = emp_info_dict[choice_key]
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            {#console.log('elm[i]', elm[i])#}
            td.innerHTML = "<input id='" + elm[i].real_name+"("+elm[i].job_number+')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }

        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    // 选择委托人
    function choice_consignor(ele_id, chose_id, choice_key) {
        chose_id = 'executor2';
        if (chose_id === "executor2" || chose_id === "executor4") {
            var dataStr = sessionStorage.getItem(choice_key);
            var dataList = [];
            if (dataStr) {
                sessionStorage.setItem(choice_key, dataStr + ", " + ele_id)
            } else {
                sessionStorage.setItem(choice_key, ele_id)
            }

            if (chose_id === "executor2") {
                var tag_id = "executor_str";
            } else {
                tag_id = "executor_str1";
            }
            var executor_str = document.getElementById(tag_id);
            if (executor_str) {
                if (document.getElementById(ele_id).checked) {
                    if (executor_str.innerText.trim()){
                        document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + ele_id;
                    }else {
                        document.getElementById(tag_id).innerHTML = ele_id;
                    }
                } else {
                    var str_push = [];
                    var executor_list = executor_str.innerText.split(", ");
                    for (var kl = 0; kl < executor_list.length; kl++) {
                        if (executor_list[kl] !== ele_id) {
                            str_push.push(executor_list[kl])
                        }
                    }
                    document.getElementById(tag_id).innerHTML = str_push.join(", ")
                }
            } else {
                document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + ele_id + "</span>";
            }
        } else {
            check_more_one_not(ele_id);
            document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;'>" + ele_id + "</span>";
        }

    }

    function summit_val() {
        var executor111 = '';
        var checked_label = document.getElementById("checked-label");
        for (var j = 0; j < checked_label.children.length; j++) {
            executor111 = executor111 + checked_label.children[j].innerText.trim() + ", ";
        }
        document.getElementById("close-model").click();
        var executor = executor111.slice(0, -2);
        document.getElementById('people').value=executor;
    }

    // 创建右侧选择人员列表
    function choice_peopel_1(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }
        var people_dict = window.people_dict;
        var people_dict_new = window.people_dict_new;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
        for (var i = 0; i < people_dict_new[choice_key].length; i++) {
            var elm = people_dict_new[choice_key];
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            {#console.log('elm[i]', elm[i])#}
            td.innerHTML = "<input id='" + elm[i].real_name+'('+elm[i].job_number+')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }
        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    // 创建右侧选择人员列表
    function choice_peopel_2(choice_key, chose_id) {
        var data_str = sessionStorage.getItem(choice_key);
        var data_list = [];
        if (data_str) {
            data_list = data_str.split(",")
        }

        var people_dict_new = window.function_list;
        document.getElementById("img-display1").style.display = "none";
        var t_table = document.getElementById("t_table2");
        if (document.getElementsByClassName("li-class add_background").length > 0) {
            var old_tag_id = document.getElementsByClassName("li-class add_background")[0].id;
            document.getElementById(old_tag_id).className = "li-class";
        }
        document.getElementById(choice_key).className = "li-class add_background";
        deltr1();
        document.getElementById("all_select_checkbox").checked = false;
        document.getElementById("all_select_checkbox").setAttribute("onclick", "check_all_select('" + choice_key + "', 'executor2')")
        for (var i = 0; i < people_dict_new[choice_key].length; i++) {
            var elm = people_dict_new[choice_key];
            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            {#console.log('elm[i]', elm[i])#}
            td.innerHTML = "<input id='" + elm[i].real_name + '(' + elm[i].job_number + ')' + "' class='check_box' type=\"checkbox\" onclick='choice_consignor(this.id, \"" + chose_id + "\"" + ", \"" + choice_key + "\")'>";
            td.style.textAlign = "center";
            td1.innerHTML = i + 1;
            td1.style.textAlign = "center";
            td2.innerHTML = elm[i].real_name;
            td2.title = elm[i].real_name;
            td2.style.textAlign = "center";
            td3.innerHTML = elm[i].job_number;
            td3.title = elm[i].job_number;
            td3.style.textAlign = "center";
            tr.appendChild(td);
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);
            t_table.appendChild(tr);
        }
        var tttt = 0;
        if (data_list) {
            if (data_list[0] === "all") {
                document.getElementById("all_select_checkbox").checked = true;
                tttt = 1
            }
        }
        for (var III = tttt; III < data_list.length; III++) {
            document.getElementById(data_list[III].trim()).checked = true;
        }
    }

    // 复选框全选
    function check_all_select(choice_key, chose_id) {
    var select_check = document.getElementById("all_select_checkbox").checked;
    var all_check_box = document.getElementsByClassName("check_box");
    chose_id = 'executor2'
    if (chose_id === "executor2") {
        var tag_id = "executor_str";
    } else {
        tag_id = "executor_str1";
    }

    var executor_list = [];
    var executor_str = document.getElementById(tag_id);
    if (executor_str) {
        if (executor_str.innerText.trim()) {
            executor_list = executor_str.innerText.split(", ")
        }
    }

    var new_check_val_list = [];
    var check_val_list = [];
    for (var HH = 0; HH < all_check_box.length; HH++) {
        all_check_box[HH].checked = true;
        check_val_list.push(all_check_box[HH].id);
        if (executor_list.lastIndexOf(all_check_box[HH].id) === -1) {
            new_check_val_list.push(all_check_box[HH].id)
        }
    }

    if (select_check) {
        if (chose_id === "executor2" || chose_id === "executor4") {

            if (executor_str) {
                if (executor_str.innerText.trim()) {
                    document.getElementById(tag_id).innerHTML = executor_str.innerText + ", " + new_check_val_list.join(", ");
                } else {
                    document.getElementById(tag_id).innerHTML = new_check_val_list.join(", ");
                }

            } else {
                document.getElementById("checked-label").innerHTML = "<span id='" + tag_id + "' style='margin-left: 1%;width: 100%;'>" + check_val_list.join(", ") + "</span>";
            }
            sessionStorage.setItem(choice_key, "all" + ", " + check_val_list.join(", "))
        } else {
            alert("该节点不能多选！");
            document.getElementById("all_select_checkbox").checked = false;
        }
    } else {
        sessionStorage.removeItem(choice_key);
        check_val_list = [];
        for (var II = 0; II < all_check_box.length; II++) {
            all_check_box[II].checked = false;
            check_val_list.push(all_check_box[II].id);
        }
        var old_check_val = document.getElementById(tag_id).innerHTML.split(", ");
        console.log(old_check_val)
        for (var TB = 0; TB < check_val_list.length; TB++) {
            removeByValue(old_check_val, check_val_list[TB])
        }

        document.getElementById(tag_id).innerHTML = old_check_val.join(", ");
    }
}

    function confirm() {
        var name = $('#ks_name').val()
        var people = $('#people').val()
        console.log(name, people)
        if (!name) {
            alert('请填写名称')
            return false
        }
        if (!people) {
            alert('请选择人员')
            return false
        }
        var xhr = new XMLHttpRequest();
        var local_host = window.location.host;          // 获取当前IP
        xhr.open('post', "/system-setup/function_list_view", true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send("describe=" + String(name) + "&people=" + String(people));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    var JsonDate = JSON.parse(xhr.responseText);
                    alert(JsonDate['message'])
                    location.reload()

                }
            }
        }
    }

</script>
{% endblock %}
